<template>
	<view class="readBox" v-if="TEXT.length != 0" @click="show_menu">
		<view class="name">{{name}}</view>
		<text class="text">{{TEXT}}</text>
		<view class="btnBox">
			<view class="getZJ" @click.stop="getZJ(1)">上一章</view>
			<view class="ML" @click.stop="show_ML">目录</view>
			<view class="getZJ" @click.stop="getZJ(0)">下一章</view>
		</view>
		<uni-drawer :visible="is_show_mulu" @close="is_show_mulu = false" mode="left" :index="num">
			<view class="MLTitle">
				目录
			</view>
			<view class="MLList">
				<view :id="'index'+index" class="MLItem" v-for="(item,index) in muluList" @click="to_ZJ" :data-index="item.num" :class="(index+1) == num?'MLItem_s':''">{{item.name}}</view>
			</view>
		</uni-drawer>
		<view class="top" v-if="menu">
			<view class="" @click="getZJ(1)">
				上一章
			</view>
			<image src="../../../static/icon_ml@2x.png" mode="" class="icon_ml" @click="show_ML"></image>
			<view class="" @click="getZJ(0)">
				下一章
			</view>
		</view>
	</view>
</template>

<script>
	import key from '@/common/key.js';
	import utils from '@/common/utils.js';
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue";
	export default {
		data() {
			return {
				muluList: [],
				TEXT: '',
				name: '',
				book_id: '',
				book_name: '',
				book_source_id: '',
				num: 1,
				opt: [],
				is_show_mulu: false,
				menu:false,
			}
		},
		onLoad(opt) {
			uni.showLoading({
				title: '加载中'
			});

			let modeEncode = opt.allData;
			let modeDecode = decodeURIComponent(modeEncode)
			let mode = JSON.parse(utils.decode(modeDecode))
			this.opt = mode
			console.log(mode);
			//判断num

			if (Number(mode.froms) == 1) {
				this.num = Number(mode.num)
			} else if (uni.getStorageSync('lookeds') != [] && uni.getStorageSync('lookeds').filter(item => item.book_id == mode.book_id)
				.length != 0) {
				let lookeds = uni.getStorageSync('lookeds').filter(item => item.book_id == mode.book_id)
				this.num = lookeds[0].num
			} else {
				this.num = Number(mode.num)
			}
			this.book_id = mode.book_id
			this.book_source_id = mode.book_source_id
			this.getDirectory(this.book_id, this.book_source_id, this.num)
		},
		components: {
			uniDrawer
		},
		watch: {
			num() {
				this.opt.num = this.num
				utils.looked(this.opt)
			}
		},
		methods: {
			// 点击事件
			show_menu(){
				this.menu = !this.menu
			},
			getZJ(is_up) {
				if (is_up == 0) {
					if (this.num > this.muluList.length - 1) {
						uni.showToast({
							title: '已经是最后一页了',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					this.num++
					this.getDirectory(this.book_id, this.book_source_id, this.num)
				} else if (is_up == 1) {
					if (this.num < 2) {
						uni.showToast({
							title: '已经是第一页了',
							duration: 2000,
							icon: 'none'
						});
						return;
					}
					this.num--
					this.getDirectory(this.book_id, this.book_source_id, this.num)
				}


			},
			show_ML() {
				this.menu = false
				this.is_show_mulu = true
			},
			to_ZJ(e) {
				this.num = e.currentTarget.dataset.index
				this.is_show_mulu = false
				this.menu = false
				this.getDirectory(this.book_id, this.book_source_id, this.num)
			},
			// 数据请求
			getDirectory(book_id, book_source_id, num) {
				const data = {
					"app": "YLXS_Android",
					"channel": "H5",
					"device_id": 0,
					"t_channel": "YLXS_Android",
					"version": "1.0.0",
					"book_id": book_id,
					"book_source_id": book_source_id
				}

				let sign = utils.sortObj(data)
				uni.request({
					url: `${key.URL}a2/book/directory`,
					method: 'POST',
					data: {
						"app": "YLXS_Android",
						"channel": "H5",
						"device_id": 0,
						"t_channel": "YLXS_Android",
						"version": "1.0.0",
						"book_id": book_id,
						"book_source_id": book_source_id,
						"sign": sign,
					},
					dataType: 'json',
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.status == 200) {
							this.muluList = res.data.data
							let url = utils.imgMd5(res.data.data[num - 1].content_url)
							this.name = res.data.data[num - 1].name
							this.getTXT(url)
						}
					}
				});
			},
			getTXT(url) {
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						this.TEXT = res.data
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						});
						uni.hideLoading();
					}
				})
			},
		}
	}
</script>

<style>
	.top {
		width: 100%;
		
		background: rgba(22, 22, 22, 0.95);
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 33;
		opacity: 0.9;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		color: #fff;
		padding: 30upx 0;
		font-size: 30upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
	}
	.icon_ml{
		width: 50upx;
		height: 50upx;
	}
	.MLTitle {
		font-size: 36upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		margin: 30upx;
	}

	.MLList {
		padding: 30upx 30upx 0upx 30upx;
		box-sizing: border-box;
	}

	.MLItem {
		font-size: 28upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
		margin-bottom: 52upx;
	}

	.MLItem_s {
		color: rgba(238, 144, 103, 1);
	}

	.readBox {
		padding: 30upx 40upx;
		background: rgba(204, 203, 201, 1);
	}

	.text {
		font-size: 36upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(76, 74, 70, 1);
		line-height: 64upx;
	}

	.name {
		font-size: 24upx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(76, 74, 70, 1);
		margin-bottom: 40upx;
	}

	.btnBox {
		display: flex;
		width: 100%;
		justify-content: space-around;
		font-size: 32upx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
	}
</style>
